<template>
  <transition name="slide">
    <music-list :title="title" :bg-image="bgImage" :songs="songs"></music-list>
  </transition>
</template>

<script>
import MusicList from 'components/music-list/music-list'
import {mapGetters} from 'vuex'
import {getDisc} from 'api/song'
import {ERR_OK} from 'api/config'
import {createSong} from 'common/js/song'

export default {
  name: 'disc',
  components: {
    MusicList
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    songs: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ...mapGetters(['disc']),
    title () {
      return this.disc.dissname
    },
    bgImage () {
      return this.disc.imgurl
    }
  },
  methods: {
    _getDisc () {
      if (!this.disc.dissid) {
        this.$router.push('/recommend')
        return
      }
      getDisc(this.id).then(resp => {
        if (resp.code === ERR_OK) {
          let songlist = resp.cdlist[0].songlist
          if (!songlist) {
            console.log('err')
            return
          }
          songlist.forEach(item => {
            let song = createSong(item)
            if (!song.album) {
              song.image = this.disc.imgurl
            }
            this.songs.push(song)
          })
          console.log(this.songs)
        }
      })
    }
  },
  created () {
    this._getDisc()
  }
}
</script>

<style lang="less" scoped>
  .slide-enter-active, .slide-leave-active {
    transition: all 0.3s;
  }
  .slide-enter, .slider-leave-to {
    transform: translate3d(100%,0,0);
  }
</style>
